<!DOCTYPE html>
<html lang="en">

    <head>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">
        <link href="css/bootstrap.min.css" rel="stylesheet">

        <!-- MetisMenu CSS -->
        <link href="css/plugins/metisMenu/metisMenu.min.css" rel="stylesheet">

        <!-- DataTables CSS -->
        <link href="css/plugins/dataTables.bootstrap.css" rel="stylesheet">

        <!-- Custom CSS -->
        <link href="css/sb-admin-2.css" rel="stylesheet">

        <!-- Custom Fonts -->
        <link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
        <?php include './script/productsScript.php'; ?>


    </head>

    <body>
        <?php
        session_start();
        if (!isset($_SESSION['role'])) {
            header("Location: login.php");
        }
        ?>
        <div id="wrapper">

            <!-- Navigation -->
            <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0;">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="index.html">Xin chào <?php echo $_SESSION['name'] ?></a> <!-- get User late -->
                </div>
                <!-- /.navbar-header -->

                <ul class="nav navbar-top-links navbar-right" >

                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-user fa-fw"></i>  <i class="fa fa-caret-down"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="info.php"><i class="fa fa-user fa-fw"></i> Thông tin cá nhân</a>
                            </li>

                            <li class="divider"></li>
                            <li><a href="script/logoutScript.php"><i class="fa fa-sign-out fa-fw"></i> Đăng xuất</a>
                            </li>
                        </ul>
                        <!-- /.dropdown-user -->
                    </li>
                    <!-- /.dropdown -->
                </ul>
                <!-- /.navbar-top-links -->

               <div class="navbar-default sidebar" role="navigation">
                    <div class="sidebar-nav navbar-collapse">
                        <ul class="nav" id="side-menu">
                            <?php
                            if ($_SESSION['role'] == 1) {
                                ?>
                                <li>
                                    <a class="active" href="statistic.php"><i class="fa fa-bar-chart-o fa"></i> &nbspThống kê<span class="fa arrow"></span></a>
                                    <ul class="nav nav-second-level">
                                        <li>
                                            <a href="statistic.php">Doanh thu</a>
                                        </li>
                                    </ul>
                                </li>

                                <li>
                                    <a href="users.php"><i class="fa fa-user fa-fw"></i> Quản lí nhân viên</a>

                                    <!-- /.nav-second-level -->
                                </li>
                                <?php
                            }
                            ?>
                            <li>
                                <a href="customers.php"><i class="fa fa-wrench fa-fw"></i>&nbsp;Quản lí khách hàng</a>

                                <!-- /.nav-second-level -->
                            </li>
                            <li>
                                <a href="#"><i class="fa fa-shopping-cart fa-fw"></i> Quản lí sản phẩm<span class="fa arrow"></span></a>
                                <ul class="nav nav-second-level">
                                    <li>
                                        <a href="categories.php">Danh mục</a>
                                    </li>
                                    <li>
                                        <a href="manufacturers.php">Nhà sản xuất</a>
                                    </li>                                    
                                    <li>
                                        <a href="products.php">Sản phẩm</a>
                                    </li>
                                </ul>
                            </li>
                            <li>

                                <a href="#"><i class="fa fa-edit fa-fw"></i> Quản lí đơn hàng<span class="fa arrow"></span></a>
                                <ul class="nav nav-second-level">
                                    <li>
                                        <a href="orders_in.php">Hóa đơn nhập</a>
                                    </li>
                                    <li>
                                        <a href="orders_out.php">Hóa đơn xuất</a>
                                    </li>

                                </ul>
                            </li>
                        </ul>
                        <!-- /.nav-second-level -->
                    </div>
                    <!-- /.sidebar-collapse -->
                </div>
                <!-- /.navbar-static-side -->
            </nav>

            <!-- Page Content -->
            <div id="page-wrapper">
                <div class="row">
                    <div class="col-lg-12">
                        <h3 class="page-header" style="color:#1c92c7">Quản lý sản phẩm</h3>
                    </div>

                    <!-- /.col-lg-12 -->
                </div>
                <div class ="row">
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist">
                        <li ><a href="#new" role="tab" data-toggle="tab">Thêm mới sản phẩm</a></li>
                        <li class="active"><a href="#view" role="tab" data-toggle="tab">Danh sách sản phẩm</a></li>

                    </ul>

                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div class="tab-pane  " id="new">
                            <div id="new-content">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="panel panel-default">
                                            <!-- /.panel-heading -->
                                            <div class="panel-body">


                                                <div id ="addnew" >
                                                    <div id = "addMess" class="alert alert-warning" role="alert" style="display: none" >Nhập tên nhà sản xuất mới , hệ thống sẽ thông báo nếu hợp lệ</div>
                                                    <form class="form-horizontal" role="form">
                                                        <div id = "m-s" class="alert alert-success" role="alert" style="display: none">Tạo mới thành công</div>
                                                        <div id = "m-e" class="alert alert-danger" role="alert" style="display: none">Không thể tạo mới</div>

                                                        <br>    
                                                        <div class="row">
                                                            <div class="form-group col-md-6">
                                                                <label  for="newProName" class="col-sm-4 control-label" style="color:#990000">Tên sản phẩm :
                                                                    <i id="ok" style="color: #00cc33 ;display: none" class="fa fa-check"></i>
                                                                    <i id="nok" style="color: red ;display: none"  class="fa fa-times"></i>
                                                                </label>
                                                                <div class="col-md-6">
                                                                    <input type="text" class="form-control" id="newProName" >
                                                                </div>
                                                            </div>    

                                                            <div class="form-group col-md-6">
                                                                <label  for="newProCode" class="col-sm-4 control-label" style="color:#990000">BarCode :</label>
                                                                <div class="col-md-6">
                                                                    <input type="text" class="form-control" id="newProCode" >
                                                                </div>

                                                            </div> 
                                                        </div>
                                                        <div class="row">
                                                            <div class="form-group col-md-6">
                                                                <label  for="newProQuantity" class="col-sm-4 control-label" style="color:#990000">Số lượng :</label>
                                                                <div class="col-md-6">
                                                                    <input type="number" class="form-control" id="newProQuantity" >
                                                                </div>
                                                            </div>
                                                            <div class="form-group col-md-6">
                                                                <label  for="newProPrice" class="col-sm-4 control-label" style="color:#990000">Đơn giá :</label>
                                                                <div class="col-md-6">
                                                                    <input type="text" class="form-control" id="newProPrice" >
                                                                </div>
                                                            </div>    
                                                        </div>
                                                        <div class="row">
                                                            <div class="form-group form-group col-md-6">
                                                                <label  for="newProCate" class="col-sm-4 control-label" style="color:#990000">Loại hàng :</label>
                                                                <div class="col-md-6">
                                                                    <select class="form-control" id ="newProCate">
                                                                        <?php
                                                                        getlistCate();
                                                                        ?>

                                                                    </select>
                                                                </div>
                                                            </div> 
                                                            <div class="form-group form-group col-md-6">
                                                                <label  for="newProManu" class="col-sm-4 control-label" style="color:#990000">Nhà sản xuất</label>
                                                                <div class="col-md-6">
                                                                    <div id="divNewProManu">
                                                                        <select id ="newProManu" class="form-control">
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                            </div> 
                                                        </div>

                                                        <!-- table -->
                                                        <div class="row">
                                                            <div class="col-lg-12" >
                                                                <div class="panel panel-info" style="border: 0;border-bottom: 0px">

                                                                    <!-- /.panel-heading -->
                                                                    <div class="panel-body "style="border:  0;border-bottom: 0px">
                                                                        <div class="table-responsive table-bordered" style="border:  0;border-bottom: 0px">

                                                                            <div class="panel-heading">
                                                                                <span style="margin-left: 20px;color: #005f8d">Thông số kĩ thuật</span>
                                                                                <div id = "message" class="alert alert-success" role="alert" style="display:none">Cập nhật thành công</div>
                                                                            </div>

                                                                            <table class="table table-responsive table-bordered display" id="example">

                                                                                <thead>
                                                                                    <tr>
                                                                                        <th style="width: 50%">Chi tiết</th>
                                                                                        <th  style="width: 45%">Thông số</th>
                                                                                        <th  style="width: 5%"></th>

                                                                                    </tr>
                                                                                </thead>
                                                                                <tbody>
                                                                                <form id ="formNew" class="form-horizontal" role="form">
                                                                                    <tr>
                                                                                        <td><input class="form-control" type="text" style="width: 100%" ></td>
                                                                                        <td><input class="form-control" type="text" style="width: 100%"></td>
                                                                                        <td style="width: 5%" class="delete"><button type="button" class ="btn btn-link"><i class="fa fa-trash-o "></i></button></td>
                                                                                    </tr>
                                                                                </form>
                                                                                </tbody>

                                                                            </table>

                                                                            <button type="button"  class="btn-link" style="float: right" id="newRow">Thêm thuộc tính</button>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                        </div>
                                                        <!--end table -->

                                                        <br>
                                                        <div class="form-group">
                                                            <div class="col-sm-offset-2 col-sm-8">
                                                                <button id ="bt" type="button" class="btn btn-primary"  style="float: right;margin-right: -50px">Thêm mới</button>
                                                                <button  id = "rs" type="reset" class="btn btn-default"style="float: right;margin-right: 20px">Làm mới</button>
                                                            </div>
                                                        </div>




                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>

                        </div>

                        <div class="tab-pane active " id="view">
                            <!-- /.row -->
                            <div id ="view-content">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="panel panel-default">

                                            <!-- /.panel-heading -->
                                            <div class="panel-body">
                                                <div class="table-responsive ">

                                                    <div class="panel-heading">
                                                        <div id = "del-message" class="alert alert-success" role="alert" style="display:none">Xóa thành công</div>
                                                    </div>
                                                    <table class="table table-responsive table-bordered" id="dataTables-example">
                                                        <thead>
                                                            <tr>
                                                                <th style="text-align:center;vertical-align:middle">Tên sản phẩm</th>
                                                                <th style="text-align:center;vertical-align:middle">Giá(VND)</th>
                                                                <th style="text-align:center;vertical-align:middle">Số lượng</th>
                                                                <th style="text-align:center;vertical-align:middle">Loại hàng</th>
                                                                <th style="text-align:center;vertical-align:middle">Nhà sản xuất</th>
                                                                <?php
                                                                if ($_SESSION['role'] == 1) {
                                                                    ?>
                                                                    <th></th>
                                                                    <th></th>
                                                                    <?php
                                                                } else {
                                                                    ?>
                                                                    <th style="display:none"></th>
                                                                    <th style="display:none"></th>
                                                                    <?php
                                                                }
                                                                ?>
                                                            </tr>
                                                        </thead>
                                                        <?php
                                                        displayBody($_SESSION['role']);
                                                        ?>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>

                    </div>

                    <!--row -->
                </div>
                <!-- end row -->
            </div>
            <!-- /#wrapper -->
        </div>
        <!-- Button trigger modal -->

        <!-- Modal -->
        <div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">

                        <h4 class="modal-title" id="myModalLabel"><span class="label label-info" >Chỉnh sửa sản phẩm</span></h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" role="form">
                            <div id = "mm-s" class="alert alert-success" role="alert" style="display: none">Cập nhật thành công</div>
                            <div id = "mm-e" class="alert alert-danger" role="alert" style="display: none">Không thể cập nhật</div>
                            <div class="form-group">
                                <label  for="proID" class="col-sm-3 control-label" style="color:#990000">Barcode</label>
                                <div class="col-sm-8">
                                    
                                    <input type="text" class="form-control" id="proID"  >
                                </div>
                            </div>   
                            <div class="form-group">
                                <label  for="proName" class="col-sm-3 control-label" style="color:#990000">Tên sản phẩm</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="proName" >
                                </div>
                            </div>    
                            <div class="form-group">
                                <label  for="proPrice" class="col-sm-3 control-label" style="color:#990000">Giá</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="proPrice" >
                                </div>
                            </div> 
                            <div class="form-group">
                                <label  for="proQuantity" class="col-sm-3 control-label" style="color:#990000">Số lượng</label>
                                <div class="col-sm-8">
                                    <input type="number" class="form-control" id="proQuantity" >
                                </div>
                            </div>
                            <div class="form-group">
                                <label  for="proCate" class="col-sm-3 control-label" style="color:#990000">Loại hàng</label>
                                <div class="col-sm-8">
                                    <select class="form-control" id ="proCate">
                                        <?php
                                            getlistCate();
                                        ?>

                                    </select>
                                </div>
                            </div> 
                            <div class="form-group">
                                <label  for="proManu" class="col-sm-3 control-label" style="color:#990000">Nhà sản xuất</label>
                                <div class="col-sm-8" id="divManu">
                                    <div id="divProManu">
                                         <select id ="proManu" class="form-control">
                                             
                                         </select>
                                    </div>
                                </div>
                            </div> 
                                
                        </form>
                        
                    </div>
                    <div class="modal-footer">

                        <button id="btnUpdate" type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>

        </div>
        <!-- jQuery Version 1.11.0 -->
        <script src="js/jquery-1.11.0.js"></script>

        <!-- Bootstrap Core JavaScript -->
        <script src="js/bootstrap.min.js"></script>

        <!-- Metis Menu Plugin JavaScript -->
        <script src="js/plugins/metisMenu/metisMenu.min.js"></script>

        <!-- DataTables JavaScript -->
        <script src="js/plugins/dataTables/jquery.dataTables.js"></script>
        <script src="js/plugins/dataTables/dataTables.bootstrap.js"></script>

        <!-- Custom Theme JavaScript -->
        <script src="js/sb-admin-2.js"></script>

        <!-- Page-Level Demo Scripts - Tables - Use for reference -->
        <script>

            $(document).ready(function() {
                $('#dataTables-example').dataTable();
                $("#qlsp").click();
                $('#example').dataTable({
                    "ordering": false,
                    "search": false,
                    "bFilter": false,
                    "paging": false,
                    "info" : false
                });
                $('#example').on('click', '.delete', function() {
                   $(this).closest('tr').remove();
                });
              
            });


        </script>
        <script>
            $("button").click(function() {
                if ($(this).attr("value") == "edit") {
                   //  alert($(this).attr("id"));
                    var name = $(this).closest('tr').find('td:eq(0)').text();
                    var price = $(this).closest('tr').find('td:eq(1)').text();
                    var quantity = $(this).closest('tr').find('td:eq(2)').text();
                    var cate = $(this).closest('tr').find('td:eq(3)').text();
                    var manu = $(this).closest('tr').find('td:eq(4)').text();
                    $('#proID').val($(this).attr("id"));
                    $('#proName').val(name);
                    $('#proPrice').val(price);
                    $('#proQuantity').val(quantity);
                    $('#proCate').val(cate);
                    $("#proCate")
                    .change();
                  //  alert(cate);
                    //$('#proManu').val(manu);
                } else if ($(this).attr("value") == "del") {

                    var select = confirm('Bạn thực sự muốn xóa ?');
                    if (select) {
                        var id = $(this).closest('tr').find('td:eq(0)').text();
                        $.ajax({
                            type: "POST",
                            url: "./script/productsScript.php",
                            data: {id: id}
                        })
                                .done(function(msg) {

                                    $('#del-message').slideDown('fast').delay(1500).slideUp('slow');
                                    window.location.href = 'products.php';
                                });
                    } else {
                        // do not thing
                    }
                } else {
//                    alert($(this).attr("value"));
                }
            });
        </script>
        <script>
            $('#btnadd').click(function() {
                if ($('#addnew').css('display') == 'none') {
                    $('#addMess').slideDown('fast').delay(3000).slideUp('slow');
                } else {
                    $('#addMess').hide();
                }
                $('#addnew').slideToggle(500);
                $('html, body').animate({
                    scrollTop: $("#bt").offset().top
                }, 1200);
            });
        </script>
        <script>
            $("#newName").blur(function() {
                var newManu = $("#newName").val().trim();
                if (newManu.length > 0) {
                    $.ajax({
                        type: "POST",
                        url: "./script/productsScript.php",
                        data: {new : newManu}
                    })
                            .done(function(msg) {
                                if (msg.length == 1) {
                                    $('#nok').show();
                                    $('#ok').hide();
                                    $('#bt').attr("disabled", "true");
                                } else if (msg.length == 2) {
                                    $('#ok').show();
                                    $('#nok').hide();
                                    $('#bt').removeAttr("disabled");
                                }
                            });
                }
            });
        </script>
        <script>
            $('#rs').click(function() {
                // $('#bt').attr("disabled", "true");
                $('#ok').hide();
                $('#nok').hide();
            });
        </script>
        <script>
            $('#bt').click(function() {
                var $n = $('#newProName').val().trim();
                var $p = $('#newProPrice').val().trim();
                var $q = $('#newProQuantity').val().trim();
                var $c = $('#newProCate').val();
               // var $m = $('#newProManu').val();
                var $m = $("select#newProManu option").filter(":selected").val();
                var $code = $('#newProCode').val();
               //alert($m);
                // get details list
                var allInputs = $("#example").find(":input");
                var strDetails= "";
                for( var i = 0; i <allInputs.size();i=i+3){
                    strDetails += "" + allInputs.eq(i).val() + ":" + "" + allInputs.eq(i+1).val() + "|\n";
                }
           //     alert(strDetails);
                var $strDetail = strDetails;
                if (($n.length > 0) && ($p.length > 0) && ($q.length > 0)&& ($code.length > 0)) {
                    $.ajax({
                        type: "POST",
                        url: "./script/productsScript.php",
                        data: {
                            C_newName: $n,
                            C_newPrice: $p,
                            C_newQuantity: $q,
                            C_newCate: $c,
                            C_newManu: $m,
                            C_newCode: $code,
                            C_desc : $strDetail
                        }
                    })
                            .done(function(msg) {
                                //$('#newProName').val(msg);
                                if (msg.search("Error") != -1) {
                                    $('#m-s').hide();
                                    $('#m-e').slideDown('fast').delay(3000).slideUp('slow');
                                    $('html, body').animate({
                                        scrollTop: $("#bt").offset().top
                                    }, 1200);
                                    $('#rs').click();
                                } else {
                                    $('#m-e').hide();
                                    $('#m-s').slideDown('fast').delay(3000).slideUp('slow');
                                    $('html, body').animate({
                                        scrollTop: $("#bt").offset().top
                                    }, 1200);
                                      window.location.href = 'products.php';
                                }
                            });
                } else {
                    $('#m-e').html("Yêu cầu nhập đủ các thông tin");
                    $('#m-e').slideDown('fast').delay(3000).slideUp('slow');
                }
            });
        </script>
        <script>
            $('#btnUpdate').click(function() {
                var name = $('#proName').val().trim();
                //Get price after convert to , format
                var priceCon = $('#proPrice').val().trim().split(",");
                var price ="";
                for(var i = 0 ;i < priceCon.length;i++){
                    price+= priceCon[i];
                }
                // End convert
                var quantity = $('#proQuantity').val().trim();
                var cate = $('#proCate').val().trim();
                var manu = $("select#proManu option").filter(":selected").val();
                var id = $('#proID').val().trim();
                if ((name.length > 0) && (price.length > 0) && (quantity.length > 0) && (cate.length > 0) && (manu.length > 0)&& (id.length > 0)) {
                    
                    $.ajax({
                        type: "POST",
                        url: "./script/productsScript.php",
                        data: {
                            name: name,
                            price: price,
                            quantity: quantity,
                            cate: cate,
                            manu: manu,
                            id: id
                        }
                    })
                            .done(function(msg) {
                                if (msg.search("Error") != -1) {
                                    $('#mm-s').hide();
                                    $('#mm-e').slideDown('fast').delay(3000).slideUp('slow');
                                } else {
                                    $('#mm-e').hide();
                                    $('#mm-s').slideDown('fast').delay(3000).slideUp('slow');

                                    window.location.href = 'products.php';
                                }
                            });
                } else {
                    $('#mm-e').html("Không được để trống các trường");
                    $('#mm-e').slideDown('fast').delay(3000).slideUp('slow');
                }
            });
        </script>
        <script>
            $("#newProCate")
                    .change(function() {
                        var str = "";
                        $("#newProCate option:selected").each(function() {
                            str += $(this).text() + " ";
                        });
                        $.ajax({
                            type: "POST",
                            url: "./script/productsScript.php",
                            data: {
                                cateToManu: str,
                                type : "2"
                            }
                        })
                                .done(function(msg) {
                                    $('#divNewProManu').html(msg);
                                });
                    })
                    .change();
        </script>
        <script>
          $("#proCate")
                    .change(function() {
                        var str = "";
                        $("#proCate option:selected").each(function() {
                            str += $(this).text() + " ";
                        });
                      //  alert(str);
                        $.ajax({
                            type: "POST",
                            url: "./script/productsScript.php",
                            data: {
                                cateToManu: str,
                                type : "1"
                            }
                        })
                                .done(function(msg) {
                            //        alert(msg);
                                    $('#divProManu').html(msg);
                                });
                    })
                    .change();
        </script>
           
        <script>
            $('#newRow').click(function() {
                $('#example tr:last').after('<tr><td><input class="form-control" type="text" style="width: 100%" ></td><td><input class="form-control" type="text" style="width: 100%"></td><td class ="delete" style="width: 5%"><button type="button" value="btnDelProDetail"  class ="btn btn-link"><i class="fa fa-trash-o "></i></button></td><tr>');
            });
        </script>


    </body>

</html>
